<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<!--layui脚本  -->
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<!-- 表格容器 -->
	<table id="demo" lay-filter="test"></table>
	<!-- 行内工具栏开始 -->
	<script type="text/html" id="toolbarDemo2">
          <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="update"><i class="layui-icon">&#xe642;</i>编辑</button>
          </div>
     </script>
	<!-- 行内工具栏结束 -->
	<!-- 修改的表单开始 -->
	<div id="updDiv" style="display: none; width: 1000">
		<form class="layui-form" style="width: 350px;" lay-filter="updForm">
			<div class="layui-form-item">
				<label class="layui-form-label">id</label>
				<div class="layui-input-inline">
					<input type="text" name="id" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">客服电话</label>
				<div class="layui-input-inline">
					<input type="text" name="tels" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">QQ号</label>
				<div class="layui-input-inline">
					<input type="text" name="qqHao" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" name="weiXin">客服微信二维码</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="test2">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<!-- 展示上传成功的图片 -->
					<img id="showImg2" src="" width="50">
					<!-- 回显图片地址 -->
					<input type="text" name="weiXin" id="url" required
						lay-verify="required" placeholder="请输入标题" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" name="gongZhongHao">微信公众号二维码</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="test3">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<!-- 展示上传成功的图片 -->
					<img id="showImg3" src="" width="50">
					<!-- 回显图片地址 -->
					<input type="text" name="gongZhongHao" id="url2" required
						lay-verify="required" placeholder="请输入标题" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 修改的表单结束 -->
	
	<script>
		layui.use([ 'table', 'form', 'layer', 'upload' ], function() {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var upload = layui.upload;
			var $ = layui.$;

			//表格渲染开始
			table.render({
				elem : '#demo',
				height : 80,
				url : 'LianXiServletAdmin?method=getLianxiList' ,//数据接口
				id : "idTest",
				cols : [ [ //表头
				{
					field : 'id',
					title : 'ID',
					width : 80,
					sort : true,
					fixed : '编号'
				}, {
					field : 'tels',
					title : '客服电话',
					width : 80
				}, {
					field : 'qqHao',
					title : 'QQ号',
					width : 80,
					sort : true
				},{
					field : 'weiXin',
					title : '客服微信二维码',
					width : 180,
					templet : function(d) {
						return '<img width="30" src="../'+d.weiXin+'"/>'
					}
				}, {
					field : 'gongZhongHao',
					title : '微信公众号二维码',
					width : 180,
					templet : function(d) {
						return '<img width="30" src="../'+d.gongZhongHao+'"/>'
					}
				},{
					title : '操作',
					width : 177,
					toolbar : '#toolbarDemo2'
				} ] ]
			});//表格渲染结束
			
			//监听事件--行内工具栏监听开始
			table.on('tool(test)', function(obj) {
				var data = obj.data;//当前行内数据
				switch (obj.event) {
				case 'update':
					//layer.msg('编辑');
					//弹窗
					layer.open({
						type : 1,
						content : $('#updDiv')
					});
					//数据回显
					form.val("updForm", data);
					$("#showImg2").attr("src", "../" + data.weiXin);//展示图片
					$("#showImg3").attr("src", "../" + data.gongZhongHao);//展示图片
					break;
				}
			});//监听事件--行内工具栏监听结束
			
			//监听表单提交--修改
			form.on('submit(formDemo)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				$.post("LianXiServletAdmin?method=updateLianxi", data.field,
						function(res) {
							console.log(res);
							if (res.code == 0) {
								layer.msg(res.msg, {
									time : 1000
								}, function() {
									layer.closeAll();//关闭所有窗口
									table.reload('idTest', {});//表格重载（根据表格id执行）
								})
							}
						}, "json")
				return false;
			});//监听修改表单提交结束--修改
			
			//图片上传执行实例---修改
			var uploadInst = upload.render({//upload.render表示渲染
				elem : '#test2',//绑定元素
				url : 'ImgServletAdmin?method=uploadImg', //上传接口
				done : function(res) {
					//上传完毕回调
					console.log(res);
					if (res.code == 0) {
						$("#showImg2").attr("src", "../images/" + res.data);//展示图片
						$("#url").val("images/" + res.data);//url的路径
					}
				},
				error : function() {
					//请求异常回调
				}
			});//图片修改执行实例结束
			//图片上传执行实例---修改
			var uploadInst = upload.render({//upload.render表示渲染
				elem : '#test3',//绑定元素
				url : 'ImgServletAdmin?method=uploadImg', //上传接口
				done : function(res) {
					//上传完毕回调
					console.log(res);
					if (res.code == 0) {
						$("#showImg3").attr("src", "../images/" + res.data);//展示图片
						$("#url2").val("images/" + res.data);//url的路径
					}
				},
				error : function() {
					//请求异常回调
				}
			});//图片修改执行实例结束

		});
	</script>

</body>
</html>